<script setup>
//  按需引入 echarts
import * as echarts from "echarts";
import map from "../assets/HK.json";

const dom = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value

// 指定图表的配置项和数据
const option = reactive({
	visualMap: {
		min: 800,
		max: 50000,
		text: ["High", "Low"],
		realtime: false,
		calculable: true,
		inRange: {
			color: ["lightskyblue", "yellow", "orangered"],
		},
	},
	series: [
		{
			type: "map",
			map: "HK",
			label: {
				show: true,
			},
			data: [
				{ name: "中西区", value: 20057.34 },
				{ name: "湾仔", value: 15477.48 },
				{ name: "东区", value: 31686.1 },
				{ name: "南区", value: 6992.6 },
				{ name: "油尖旺", value: 44045.49 },
				{ name: "深水埗", value: 40689.64 },
				{ name: "九龙城", value: 37659.78 },
				{ name: "黄大仙", value: 45180.97 },
				{ name: "观塘", value: 55204.26 },
				{ name: "葵青", value: 21900.9 },
				{ name: "荃湾", value: 4918.26 },
				{ name: "屯门", value: 5881.84 },
				{ name: "元朗", value: 4178.01 },
				{ name: "北区", value: 2227.92 },
				{ name: "大埔", value: 2180.98 },
				{ name: "沙田", value: 9172.94 },
				{ name: "西贡", value: 3368 },
				{ name: "离岛", value: 806.98 },
			],
			// 自定义名称映射
			nameMap: {
				"Central and Western": "中西区",
				Eastern: "东区",
				Islands: "离岛",
				"Kowloon City": "九龙城",
				"Kwai Tsing": "葵青",
				"Kwun Tong": "观塘",
				North: "北区",
				"Sai Kung": "西贡",
				"Sha Tin": "沙田",
				"Sham Shui Po": "深水埗",
				Southern: "南区",
				"Tai Po": "大埔",
				"Tsuen Wan": "荃湾",
				"Tuen Mun": "屯门",
				"Wan Chai": "湾仔",
				"Wong Tai Sin": "黄大仙",
				"Yau Tsim Mong": "油尖旺",
				"Yuen Long": "元朗",
			},
		},
	],
});

onMounted(() => {
	var myChart = echarts.init(dom.value);

	// 注册地图
	echarts.registerMap("HK", map);

	myChart.setOption(option);
	window.addEventListener("resize", () => {
		myChart.resize();
	});
});
</script>

<template>
	<div ref="dom" style="width: 100%; height: 90%"></div>
</template>
